<template>
	<view class="home">
		<view class="headtop">
			<image src="../../static/images/index_bj.png" class="bj"></image>
			<view class="top clearfix">
				<view class="left fl clearfix">
					<view class="name fl">{{city}}</view>
					<image src="../../static/images/xiala.png" class="fl"></image>
				</view>
				<view class="right fr clearfix" @click="setaddress">
					<image src="../../static/images/address.png" class="fl"></image>
					<view class="name fl">设置位置</view>
				</view>
			</view>
			<view class="banner">
				<swiper class="swiper-box" :autoplay="autoplay" :interval="interval" :duration="duration"
					circular="true" previous-margin="18px" next-margin="18px" @change="partSwiperChange">
					<swiper-item v-for="(item, index) in info" :key="index">
						<view :class="['swiper-item', partcurrentIndex === index?'active':'']">
							<image :class="['image', partcurrentIndex === index?'active':'']" :src="item.url" />
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="nav clearfix">
			<view class="list" @click="topage('/pages/home/second/account')">
				<image src="../../static/images/index_nav1.png"></image>
				<view class="title">AI账号</view>
			</view>
			<view class="list" @click="topage('/pages/home/second/grab')">
				<image src="../../static/images/index_nav2.png"></image>
				<view class="title">AI获取</view>
			</view>
			<view class="list" @click="topage('/pages/home/second/customer')">
				<image src="../../static/images/index_nav3.png"></image>
				<view class="title">AI客户</view>
			</view>
			<view class="list" @click="topage('/pages/home/second/task')">
				<image src="../../static/images/index_nav4.png"></image>
				<view class="title">AI拓客</view>
			</view>
			<view class="list" @click="topage('/pages/user/second/college')">
				<image src="../../static/images/index_nav5.png"></image>
				<view class="title">AI学院</view>
			</view>
		</view>
		<view class="gonggao">
			<swiper circular="true" vertical="true" autoplay="true" interval="3000" duration="1000" class="swiperBox">
				<swiper-item v-for="(item, index) in noticeList" :key="index" class="swiperItem clearfix">
					<image :src="item.image" class="sj_logo"></image>
					<view class="txt1">{{item.title}}</view>
				</swiper-item>
			</swiper>
			<image src="../../static/images/laba.png" class="ggimage"></image>
		</view>
		<view class="container">
			<view class="bottomcontent">
				<view class="nr clearfix" v-for="(item,index) in list" :key="index" @click="detail(index)">
					<image :src="item.coverUrl" class="fl" mode="aspectFill"></image>
					<view class="right fl">
						<view class="title">{{item.name}}</view>
						<view class="desc">
							<text>{{item.categoryName}}</text>
							<text>{{item.address}}</text>
							<text>人均¥{{item.consumePrice}}</text>
						</view>
						<view class="bottom">
							<view class="name">点击更新进行开发客户</view>
						</view>
					</view>
					<view class="juli">{{item.distance}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		request
	} from '@/api/request';

	export default {
		data() {
			return {
				city: '',
				adcode: '',
				latitude: '',
				longitude: '',
				indicatorDots: true,
				autoplay: true,
				interval: 4000, //切换的间隔时间
				duration: 500, //滑动动画时长
				info: [],
				partcurrentIndex: 0,
				userData: [],
				list: [],
				noticeList: [],
			}
		},
		created() {
			// 用户基本信息
			request({
				url: '/api/user/profile',
				method: 'GET',
				data: {},
				header: {
					'xx-token': uni.getStorageSync('token')
				}
			}).then((response) => {
				this.userData = response.data;

				this.getAddress();
			}).catch((error) => {});
			
			// 公告信息
			request({
				url: '/api/user/slide',
				method: 'GET',
				data: {
					attr: 1,
				},
				header: {
					'xx-token': uni.getStorageSync('token')
				}
			}).then((response) => {
				let list = response.data.list;
				for(let i =0;i<list.length;i++){
					list[i].image = 'https://groupbuy.huishuokj.com/upload/' + list[i].image;
				}
				
				this.noticeList = list;
			}).catch((error) => {});
			
			// 广告信息
			request({
				url: '/api/user/advert',
				method: 'GET',
				data: {
					attr: 1,
				},
				header: {
					'xx-token': uni.getStorageSync('token')
				}
			}).then((response) => {
				let list = response.data.list;
				for(let i =0;i<list.length;i++){
					list[i].url = 'https://groupbuy.huishuokj.com/upload/' + list[i].image;
				}
				
				this.info = list;
			}).catch((error) => {});
		},
		methods: {
			getList() {
				let that = this;
				this.list = [];

				uni.showLoading({
					title: '加载中'
				})

				uni.request({
					url: 'http://39.106.73.165:6605/api/business_list',
					data: {
						user_id: that.userData.id,
						team_id: that.userData.team_id,
						categoryId: '1612403856638021633',
						distance: -2,
						newConsumptionType: 0,
						pageNo: 0,
						sourceType: 0
					},
					method: 'POST',
					success: (res) => {
						if (res.data.code == 200) {
							uni.hideLoading()
							let list = res.data.result.result.records;
							for (let i = 0; i < list.length; i++) {
								let arr = list[i].categoryName.split(';')
								list[i].categoryName = arr[arr.length - 1];

								if (list[i].distance >= 1000) {
									list[i].distance = (list[i].distance / 1000).toFixed(2) + 'km'
								} else {
									list[i].distance = list[i].distance + 'm'
								}

								this.list.push(list[i]);
							}
						}
					},
					fail(error) {
						uni.showToast({
							title: error,
							icon: 'none'
						})
					}
				})
			},
			// 点击详情
			detail(index) {
				let json = this.list[index];

				uni.setStorage({
					key: 'json',
					data: json
				})

				uni.navigateTo({
					url: '/pages/home/second/grab_detail'
				})
			},
			// 商家位置信息
			getAddress() {
				let that = this;

				uni.request({
					url: 'http://39.106.73.165:6605/api/get_address',
					data: {
						user_id: that.userData.id,
						team_id: that.userData.team_id,
					},
					method: 'POST',
					success: (res) => {
						if (res.data.code == 200) {
							// 已经设置
							that.latitude = res.data.result.latitude;
							that.longitude = res.data.result.longitude;
							that.adcode = res.data.result.areaId;
							that.city = res.data.result.name + '市';

							that.getList();
						} else {
							that.getLocation();
						}
					},
					fail(error) {
						uni.showToast({
							title: error,
							icon: 'none'
						})
					}
				})
			},
			getLocation() {
				let that = this;

				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						that.longitude = res.longitude;
						that.latitude = res.latitude;

						request({
							url: '/api/usergroupbuy/gaodeRegeo',
							method: 'POST',
							data: {
								lat: that.latitude,
								long: that.longitude,
							},
							header: {
								'xx-token': uni.getStorageSync('token')
							}
						}).then((response) => {
							let city = response.data.data.city;
							that.adcode = response.data.data.adcode;

							if (city.substr(-1, 1) == '市') {
								that.city = city;
							} else {
								that.city = city + '市';
							}
							
							// 设置位置
							that.setAddressinfo(that.latitude, that.longitude, that.adcode);

						}).catch((error) => {
							uni.showToast({
								title: error,
								icon: 'none',
							})
						});
					}
				})
			},
			// 点击设置商家位置
			setaddress() {
				let that = this;

				uni.chooseLocation({
					latitude: that.latitude,
					longitude: that.longitude,
					success: (res) => {
						request({
							url: '/api/usergroupbuy/gaodeRegeo',
							method: 'POST',
							data: {
								lat: res.latitude,
								long: res.longitude,
							},
							header: {
								'xx-token': uni.getStorageSync('token')
							}
						}).then((response) => {
							let city = response.data.data.city;
							that.adcode = response.data.data.adcode;

							if (city.substr(-1, 1) == '市') {
								that.city = city;
							} else {
								that.city = city + '市';
							}

							// 设置位置
							that.setAddressinfo(res.latitude, res.longitude, that.adcode);

						}).catch((error) => {
							uni.showToast({
								title: error,
								icon: 'none',
							})
						});
					},
					fail: function(err) {
						
					}
				})
			},
			// 保存商家位置
			setAddressinfo(latitude, longitude, adcode) {
				let that = this;

				let json = {
					"latitude": latitude,
					"longitude": longitude,
					"code": adcode,
					"user_id": this.userData.id,
					"team_id": this.userData.team_id
				}

				uni.request({
					url: 'http://39.106.73.165:6605/api/set_address',
					data: json,
					method: 'POST',
					success: (res) => {
						if (res.data.code == 200) {
							uni.showToast({
								title: res.data.result,
								icon: 'none'
							})

							setTimeout(function() {
								that.getList();
							}, 2000)
						}
					},
					fail(error) {
						uni.showToast({
							title: error,
							icon: 'none'
						})
					}
				})
			},
			partSwiperChange(event) {
				this.partcurrentIndex = event.detail.current
			},
			topage(url) {
				uni.navigateTo({
					url
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.home {
		width: 100%;
		margin: 0 auto;

		.headtop {
			width: 100%;
			margin: 0 auto;
			position: relative;
			height: 470rpx;

			.bj {
				width: 100%;
				height: 286rpx;
				position: absolute;
				top: 0;
				left: 0;
			}

			.top {
				width: 94%;
				margin: 0 auto;
				position: absolute;
				left: 3%;
				top: 94rpx;
				padding: 0 1rpx;


				.left {
					height: 32rpx;
					line-height: 32rpx;

					.name {
						font-size: 32rpx;
						color: #FFFFFF;
						margin-right: 8rpx;
					}

					image {
						width: 26rpx;
						height: 16rpx;
						margin-top: 10rpx;
					}
				}

				.right {
					height: 32rpx;
					line-height: 32rpx;

					.name {
						font-size: 28rpx;
						color: #FFFFFF;
						margin-left: 8rpx;
					}

					image {
						width: 22rpx;
						height: 26rpx;
						margin-top: 3rpx;
					}
				}
			}

			.banner {
				width: 100%;
				margin: 0 auto;
				position: absolute;
				top: 150rpx;
				left: 0;

				.swiper-box {
					width: 100%;
					height: 300rpx;

					.swiper-item {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						margin: 6rpx;
						height: 300rpx;

						.image {
							width: 700rpx;
							height: 260rpx;
						}
					}

					.active {
						.image {
							width: 668rpx;
							height: 296rpx;
						}
					}
				}
			}
		}

		.nav {
			width: 94%;
			margin: 0 auto;

			.list {
				width: 20%;
				text-align: center;
				float: left;

				image {
					width: 88rpx;
					height: 88rpx;
					margin-bottom: 4rpx;
				}

				.title {
					font-size: 28rpx;
					color: #ECDEA4;
				}
			}
		}
		
		.gonggao{
			width: 94%;
			margin: 0 auto;
			margin-top: 40rpx;
			background: #242831;
			border-radius: 10rpx;
			padding: 0rpx 20rpx;
			box-sizing: border-box;
			position: relative;
			
			.swiperBox{
				height: 88rpx;
			}
			
			.sj_logo{
				width: 60rpx;
				height: 60rpx;
				border-radius: 10rpx;
				border: 1rpx solid #E8BD70;
				float: left;
				margin-right: 20rpx;
				margin-top: 14rpx;
			}
			
			.txt1{
				float: left;
				height: 62rpx;
				line-height: 62rpx;
				color: #FFFFFF;
				font-size: 28rpx;
				margin-top: 14rpx;
				width: 70%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			
			.ggimage{
				position: absolute;
				top: 0;
				right: 0;
				width: 91rpx;
				height: 88rpx;
			}
		}

		.container {
			width: 94%;
			margin: 0 auto;
			margin-top: 22rpx;

			.bottomcontent {
				margin-top: 20rpx;
				padding-bottom: 120rpx;

				.nr {
					width: 100%;
					margin: 0 auto;
					padding: 20rpx;
					box-sizing: border-box;
					background: #242831;
					border-radius: 10rpx;
					position: relative;
					margin-bottom: 18rpx;

					image {
						width: 150rpx;
						height: 150rpx;
						margin-right: 20rpx;
						border: 1rpx solid #E8BD70;
						border-radius: 10rpx;
					}

					.right {
						width: 60%;

						.title {
							font-size: 28rpx;
							color: #FFFFFF;
							font-weight: 700;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.desc {
							margin-top: 10rpx;
							margin-bottom: 16rpx;

							text {
								font-size: 24rpx;
								color: #FFFFFF;
								margin-right: 20rpx;
							}
						}

						.bottom {
							text-align: center;
							padding: 4rpx 16rpx;
							background: linear-gradient(to right, #fff9ce, #e4b985);
							border-radius: 6rpx;
							display: inline-block;

							.name {
								font-size: 24rpx;
								color: #8A5A44;

								text:nth-of-type(1) {
									// color: #8F3005;
									color: #FF0013;
									font-weight: 700;
								}

								text:nth-of-type(2) {
									color: #FF0013;
									font-weight: 700;
								}
							}
						}
					}

					.juli {
						position: absolute;
						top: 76rpx;
						right: 20rpx;
						color: #FFFFFF;
						font-weight: 700;
						font-size: 24rpx;
					}
				}
			}
		}
	}
</style>